<template>
	<div>

		<div class="container">
			<div style="display: flex;padding-top: 0.5em;">
				<div style="margin-left: 0.2em;" @click="toBack">
					<image src="/static/imgs/back.png" style="width: 1.5em;" mode="widthFix"></image>
				</div>
				<div></div>
			</div>
			<div style="position: relative; background-color: #000;padding:1.0em;">
				<div style="text-align: center;font-size: 1.2em;margin-bottom: 0.5em;">加盟店申请</div>
				<div class="row">
					<div class="inputlable">加盟商电话</div>
					<div class="inputright">
						<input type="text" v-model="obj.joinPhone" placeholder="请输入加盟商的电话" class="inputText" />
					</div>
					<div class="clear"></div>
				</div>
				<div class="row">
					<div class="inputlable">密码</div>
					<div class="inputright">
						<input type="text" v-model="obj.joinPass" placeholder="请输入加盟店密码" class="inputText" />
					</div>
					<div class="clear"></div>
				</div>
				<div class="row">
					<div class="inputlable">加盟店名字</div>
					<div class="inputright">
						<input type="text" v-model="obj.joinName" placeholder="请输入加盟店名字" class="inputText" />
					</div>
					<div class="clear"></div>
				</div>
				<div class="row">
					<div class="inputlable">加盟商地址</div>
					<div class="inputright">
						<input type="text" v-model="obj.joinAddress" placeholder="请输入加盟商地址" class="inputText" />
					</div>
					<div class="clear"></div>
				</div>
				<!-- <div class="row">
					<div style="width: 100%;margin: 0 auto;overflow: hidden;margin-left: 8%;">
						<map :latitude="latitude" :longitude="longitude" :markers="covers"
							style="margin-left: -16%;"></map>
					</div>
				</div> -->
				<div class="row">
					<div class="inputlable">加盟商详细地址</div>
					<div class="inputright">
						<textarea v-model="obj.joinLocation" class="inputText"
							style="height: 5em;border: 1px solid #ccc;width: 100%;margin-bottom: 0.5em;"
							placeholder="请输入加盟商详细地址"></textarea>

					</div>
					<div class="clear"></div>
				</div>
				<div class="row">
					<div class="inputlable">经销商电话</div>
					<div class="inputright">
						<input type="text" v-model="obj.lePhone" placeholder="请输入经销商电话" class="inputText" />
					</div>
					<div class="clear"></div>
				</div>
				<div class="row">
					<div class="inputlable">经销商店铺图片</div>
					<div class="inputright" style="height: 4em;overflow: hidden;">
						<uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" @select="select"
							@progress="progress" @success="success" @fail="fail" />
					</div>
					<div class="clear"></div>
				</div>
				<div style="margin-top: 0.8em;">
					<button class="submitBt" @click="addData">提交申请</button>
				</div>
				<div style="font-size: 0.8em;display: flex; align-items: center;">
					<div style="margin-left: 1.5em;"><uni-data-checkbox multiple :localdata="agreeList"
							@change="handleChangeAgree" /></div>
					<div style="margin-left: -1.9em;">
						<div @click="openPopup" style="color: red;border-bottom: 1px solid red;">
							我同意以下[用户服务协议]与[个人信息保护政策]
						</div>
					</div>
				</div>
				<div style="font-size: 0.8em;margin: 1.5em;">
					<div>为有效保障您使用本服务的合法权益，您理解并同意接受以下规则</div>
					<div>1.您通过包括但不限于以下方式向服贸会数字平台发出的指令，均视为您本人的指令，不可撤回或撤销，您应自行对服贸会数字平台执行前述指令所产生的任何结果承担责任</div>
					<div>2.通过您的服贸会数字平台账户和密码进行的所有操作:</div>
					<div>通过与您的账号绑走的手机号码向服贸会数字平台发送的全部信息</div>
					<div>3.通过与您的账号绑定的其他硬件、终端、软件、代号、编码、代码、其他账户名等有形体或无形体向服贸会数字平台发送的信息:</div>
					<div>4.其他服贸会数字平台与您约走或服贸会数字平台认可的其他方式。</div>
				</div>
				<div style="margin-top: 0.5em;">&nbsp;</div>
			</div>

		</div>

		<uni-popup ref="popup" type="center" :maskClick="false">
			<div
				style="width: 80vw;padding: 0.5em;box-sizing: border-box; background-color: #fff; border-radius: 0.5em;">
				<div style="border-bottom: 1px solid #ccc;text-align: right;padding: 0.3em;">
					<div @click="colsePopup">关闭</div>
				</div>
				<div style="font-size: 0.9em;color: #848484;margin-top: 0.5em;padding: 0.5em;">
					<div style="text-align: center;">[用户服务协议]与[个人信息保护政策]</div>
					为有效保障您使用本服务的合法权益，您理解并同意接受以下规则:</br>
					1.您通过包括但不限于以下方式向服贸会数字平台发出的指令，均视为您本人的指令，不可撤回或撤销，您应自行对服贸会数字平台执行前述指令所产生的任何结果承担责任</br>
					2.通过您的服贸会数字平台账户和密码进行的所有操作:</br>
					通过与您的账号绑走的手机号码向服贸会数字平台发送的全部信息</br>
					3.通过与您的账号绑定的其他硬件、终端、软件、代号、编码、代码、其他账户名等有形体或无形体向服贸会数字平台发送的信息:</br>
					4.其他服贸会数字平台与您约走或服贸会数字平台认可的其他方式。</br>
				</div>
			</div>
		</uni-popup>
	</div>
</template>

<script setup>
	import {
		reactive,
		ref,
		toRaw
	} from 'vue';
	import api from '@/common/httprequest.js'
	
	const toBack = () => {
		uni.redirectTo({
			url: '/login/login'
		})
	}
	
	
	const popup = ref(null);
	const openPopup = () => {
		// 打开弹出层
		popup.value?.open();
	}
	const colsePopup = () => {
		// 打开弹出层
		popup.value?.close()
	}

	let agree = ref(0);
	const handleChangeAgree = (e) => {
		if (e.detail.data.length > 0) {
			agree.value = 1;
		} else {
			agree.value = 0;
		}
	}

	let imageValue = reactive([]);

	let obj = reactive({
		"joinPhone": null,
		"joinPass": null,
		"joinName": null,
		"joinAddress": null,
		"joinLocation": null,
		"lePhone": null,
		"joinStatus": 0, //未审核
		"joinImg": null,
		"toApplet": null,
		"creatTime": null,
		"updateTime": null
	});

	let agreeList = reactive([{
		text: null,
		value: 0
	}]);

	//=============图片上传方法开始============//
	// 获取上传状态
	const select = (res) => {
		let file = res.tempFiles[0];
		let baseURL = api.getUrl();

		uni.uploadFile({
			url: `${baseURL}/common/upload`, // 上传图片的接口
			filePath: file.path,
			name: 'file',
			formData: {},
			success(e) {
				let res = JSON.parse(e.data);
				console.log('imgres', res);
				obj.joinImg = res.fileName;
				// if (res.code == 200) {
				//     obj.userImg = res.fileName;
				//     defaultImage.value = null;
				// }
			},
			fail(err) {
				console.error('上传失败:', err);
			}
		});

	}
	// 获取上传进度
	const progress = (e) => {
		console.log('上传进度：', e)
	}
	// 上传成功
	const success = (e) => {
		console.log('上传成功')
	}
	// 上传失败
	const fail = (e) => {
		console.log('上传失败：', e)
	}
	//=============图片上传方法结束==================//

	const addData = () => {
		if (agree.value == 0) {
			uni.showToast({
				title: '请先同意用户协议,请勾选！',
				icon: 'none',
				duration: 2000
			})
			return;
		}
		//console.log('this.obj.joinImg',this.obj.joinImg )
		if (obj.joinPhone == null) {
			uni.showToast({
				icon: 'none',
				duration: 1000,
				title: '手机号不能为空！'
			})
			return;
		}
		if (obj.joinPass == null) {
			uni.showToast({
				icon: 'none',
				duration: 1000,
				title: '密码不能为空！'
			})
			return;
		}
		if (obj.joinImg == null) {
			uni.showToast({
				icon: 'none',
				duration: 1000,
				title: '经销商图片必须上传！'
			})
			return;
		}
		if (obj.joinName == null) {
			uni.showToast({
				icon: 'none',
				duration: 1000,
				title: '加盟店名字不能为空！'
			})
			return;
		}
		if (obj.joinAddress == null) {
			uni.showToast({
				icon: 'none',
				duration: 1000,
				title: '加盟商地址不能为空！'
			})
			return;
		}
		if (obj.joinLocation == null) {
			uni.showToast({
				icon: 'none',
				duration: 1000,
				title: '加盟商详细地址不能为空！'
			})
			return;
		}
		if (obj.lePhone == null) {
			uni.showToast({
				icon: 'none',
				duration: 1000,
				title: '经销商电话不能为空！'
			})
			return;
		}
		uni.showLoading({
			title: '数据处理中...'
		});
		api.request({
			method: "post",
			url: "/app/league/app",
			params: obj
		}).then(res => {
			//console.log('res',res);
			uni.hideLoading();
			if (res.code == 200) {
				uni.showToast({
					icon: 'success',
					duration: 1000,
					title: '信息上传成功！'
				})			
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/index/index'
					})
				}, 2000)
			} else {
				uni.showToast({
					icon: 'none',
					duration: 1000,
					title: res.msg
				})
			}
		});
	}
</script>

<style scoped>
	.submitBt {
		width: 90%;
		margin: 0 auto;
		height: 2.0em;
		line-height: 1.8em;
		font-size: 1.0em;
		background-color: #ccc;
		color: #fff;
	}

	map {
		height: 50vh;
		width: 100%;
		margin: 0 auto;
	}

	.container {
		background-color: #000;
		color: #fff;
		width: 100%;
		height: 100vh;
	}

	.inputright {
		float: left;
		margin-left: 0.5em;
		width: calc(100% - 10em);
	}

	.inputlable {
		float: left;
		min-width: 7em;
		font-size: 0.9em;
		/*background-color: #F5F5F5;*/
		text-align: right;
		margin-left: 0.9em;
	}

	.row {
		text-align: center;
		font-size: 1.0em;
		margin-top: 0.3em;
		overflow: hidden;
		border-bottom: 1px solid #ccc;
	}

	.inputText {
		text-align: left;
		height: 2.0em;
		line-height: 2.0em;
		font-size: 0.8em;
		padding-left: 0.5em;
		padding-right: 0.5em;
		width: 100%;
	}

	.clear {
		clear: both;
	}
</style>